<script>
import { defineComponent, getCurrentInstance, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useCounterStore } from "../stores";
import { ElMessage } from "element-plus";

export default defineComponent({
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useCounterStore();
    const { proxy } = getCurrentInstance();
    const labelPosition = ref("left");
    const taskName = ref("");
    const projectName = ref("");
    const projectType = ref("");
    const taskTime = ref("");
    const taskId = ref("");
    const userId = ref("");
    const projectId = ref("");
    const childTaskId = ref("");
    const childTaskName = ref("");
    const conscientious = ref("");
    const projectUser = ref("");
    const menuFlag = ref(Boolean(sessionStorage.getItem("flag")));
    const dialogVisible = ref(false);
    const userOptions = ref([]);
    const taskOptions = ref([
      {
        value: "Option1",
        label: "标准项目"
      },
      {
        value: "Option2",
        label: "团队项目"
      },
      {
        value: "Option3",
        label: "个人工作"
      },
      {
        value: "Option4",
        label: "家庭项目"
      },
      {
        value: "Option5",
        label: "其他"
      }
    ]);
    const userArray = () => {
      let map = {};
      proxy.$http.get(`system/user/list`).then(res => {
        for (var i = 0; i < res.rows.length; i++) {
          map = {
            value: res.rows[i].userId,
            label: res.rows[i].userName
          };
          userOptions.value = [map, ...userOptions.value];
        }
      });
    };
    const updateBack = () => {
      dialogVisible.value = true;
    };
    const insertTask = () => {
      console.log(projectUser.value);
      proxy.$http
        .post(`system/project`, {
          projectId: projectId.value,
          projectName: projectName.value,
          projectType: projectType.value,
          userIds: [sessionStorage.getItem("userId")]
        })
        .then(res2 => {
          console.log(userId.value);
          proxy.$http
            .post(`system/task`, {
              taskId: taskId.value,
              taskName: taskName.value,
              workingHours: taskTime.value,
              conscientious: conscientious.value,
              projectIds: [projectId.value],
              createUserId: sessionStorage.getItem("userId"),
              userIds: [projectUser.value]
            })
            .then(res => {
              ElMessage({
                showClose: true,
                message: "发布任务成功 ^.^",
                type: "success"
              });
            })
            .catch(err => {
              ElMessage({
                showClose: true,
                message: "发布任务失败 X.x",
                type: "error"
              });
            });
        });
    };
    const insertChildTask = () => {
      proxy.$http
        .post(`system/subtask`, {
          subtaskId: childTaskId.value,
          subtaskName: childTaskName.value,
          taskIds: [taskId.value]
        })
        .then(res => {
          ElMessage({
            showClose: true,
            message: "添加子任务成功 ^.^",
            type: "success"
          });
        })
        .catch(err => {
          ElMessage({
            showClose: true,
            message: "添加子任务失败 X.x",
            type: "error"
          });
        });
      dialogVisible.value = false;
    };
    const cancel = () => {
      dialogVisible.value = false;
    };
    userArray();
    return {
      labelPosition,
      taskOptions,
      taskTime,
      taskName,
      taskId,
      userId,
      conscientious,
      projectName,
      projectType,
      projectId,
      dialogVisible,
      childTaskId,
      childTaskName,
      userOptions,
      projectUser,
      updateBack,
      insertTask,
      insertChildTask,
      menuFlag,
      cancel,
      userArray
    };
  }
});
</script>

<template>
  <el-card style="text-align:center" class="box-card">
    <div v-if="menuFlag">
      <el-form
        :label-position="labelPosition"
        label-width="100px"
        :model="formLabelAlign"
        style="max-width: 460px"
      >
        <el-form-item label="项目编号：">
          <el-input v-model="projectId" placeholder="请输入项目编号"></el-input>
        </el-form-item>
        <el-form-item label="项目名：">
          <el-input v-model="projectName" placeholder="请输入项目名"></el-input>
        </el-form-item>
        <el-form-item label="项目类型：">
          <el-select v-model="projectType" placeholder="选择任务类型">
            <el-option
              v-for="item in taskOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="任务编号：">
          <el-input v-model="taskId" placeholder="请输入任务编号"></el-input>
        </el-form-item>
        <el-form-item label="任务名：">
          <el-input v-model="taskName" placeholder="请输入任务名"></el-input>
        </el-form-item>

        <el-form-item label="任务时长：">
          <el-input v-model="taskTime" placeholder="请输入任务时长"></el-input>
        </el-form-item>
        <el-form-item label="负责人：">
          <span style="float:left"></span>
          <el-select v-model="projectUser" placeholder="请选择任务负责人">
            <el-option
              v-for="item in userOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="insertTask()" class="hvr-grow">新增</el-button>
          <el-button @click="updateBack()" class="hvr-grow">添加子任务</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-else>
      <h1>您尚未有权限创建任务！请联系负责人为您指派任务</h1>
    </div>
  </el-card>
  <el-dialog title="新增子任务" width="40%" v-model="dialogVisible">
    <el-form
      :model="passForm"
      status-icon
      :rules="rules"
      ref="passForm"
      label-width="100px"
      class="grid2"
    >
      <el-form-item label="主任务编号：">
        <el-input v-model="taskId"></el-input>
      </el-form-item>
      <el-form-item label="子任务编号：">
        <el-input v-model="childTaskId"></el-input>
      </el-form-item>
      <el-form-item label="子任务名：">
        <el-input v-model="childTaskName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancel()" class="hvr-grow">取 消</el-button>
        <el-button type="primary" @click="insertChildTask()" class="hvr-grow">确 定</el-button>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer"></span>
  </el-dialog>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.container.content {
  flex: 1;
}
.container.content.item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.container.content.item.item-title {
  flex: 1;
}
.container.content.item.item-title.taskfont {
  color: #bbb;
  font-size: 18px;
}
.el-input {
  width: 300px;
}
.box-card {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
</style>
